<!--
 * @Author       : wfl
 * @LastEditors  : wfl
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-04-26 18:36:23
 * @LastEditTime : 2023-07-21 13:36:11
-->
<script lang="ts" setup name="IkColorText">
import type { PropType } from 'vue'

defineProps({
  color: {
    type: String,
    default: ''
  },
  type: {
    type: String as PropType<'info' | 'success' | 'error' | 'warning' | 'default' >,
    default: 'info'
  }
})
</script>

<template>
  <p class="ik-color-text" :style="{ color }" :class="type">
    <slot></slot>
  </p>
</template>

<style lang="scss" scoped>
.ik-color-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  &.info {
    color: var(--ik-info);
  }

  &.success {
    color: var(--ik-success);
  }

  &.error {
    color: var(--ik-error);
  }

  &.warning {
    color: var(--ik-warn);
  }

   &.default {
    color: var(--ik-vice-text-color);
  }
}
</style>
